<template>
  <div class="my">
    <div class="my-header">
      <div class="my-header__img"></div>
      <div class="my-header__item">
        <p>{{$route.query.username}}</p>
        <p>13018073006</p>
      </div>
      <div class="my-header__next">
        <img src="../assets/下一步 线性.png" alt="">
      </div>
    </div>
    <div class="my-account">
      <div @click="$router.push({ name: 'ShoppingCoupon' })" class="my-account__right">
        <p>5<span>个</span></p>
        <p>红包</p>
      </div>
      <div class="my-account__item">
        <p>8<span>个</span></p>
        <p>金币</p>
      </div>
    </div>
    <div class="my-address">
      <div class="my-address__icon">
        <img src="../assets/收货地址.png" alt="">
      </div>
      <div class="my-address__item" @click="address">
        我的收货地址
        <img src="../assets/下一步.png" alt="">
      </div>
    </div>
    <div class="my-mall">
      <div class="my-mall__item">
        <div class="my-address__icon">
          <img src="../assets/商品.png" alt="">
        </div>
        <div class="my-address__item border">
          金币商城
          <img src="../assets/下一步.png" alt="">
        </div>
      </div>
      <div class="my-mall__item">
        <div class="my-address__icon">
          <img src="../assets/礼品.png" alt="">
        </div>
        <div class="my-address__item">
          分享拿20现金
          <img src="../assets/下一步.png" alt="">
        </div>
      </div>
    </div>
    <div class="my-mall">
      <div class="my-mall__item">
        <div class="my-address__icon">
          <img src="../assets/客服.png" alt="">
        </div>
        <div class="my-address__item border">
          我的客服
          <img src="../assets/下一步.png" alt="">
        </div>
      </div>
      <div class="my-mall__item">
        <div class="my-address__icon">
          <img src="../assets/规则.png" alt="">
        </div>
        <div class="my-address__item">
          规则中心
          <img src="../assets/下一步.png" alt="">
        </div>
      </div>
    </div>
    <App-footer></App-footer>
  </div>
</template>

<script>
import AppFooter from './AppFooter.vue'

export default {
  name: 'My',
  data () {
    return {}
  },
  components: { AppFooter },
  methods: {
    address () {
      this.$router.push({ name: 'Address' })
    }
  }
}
</script>

<style scoped lang=scss>
  *{
    margin: 0px;
    padding: 0px;
  }
  .my{
    width: 100%;
    height: 177vw;
    .my-header{
      width: 100%;
      height: 220px;
      box-sizing: border-box;
      padding: 0px 10px;
      background-color: #009cfe;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .my-header__img{
        width: 122px;
        height: 122px;
        border-radius: 50%;
        background-color: #abcdef;
      }
      .my-header__item{
        width: 515px;
        height: 90px;
        p:nth-child(1){
          font-size: 33px;
          color: #fff;
        }
        p:nth-child(2){
          font-size: 27px;
          color: #fff;
        }
      }
      .my-header__next{
        width: 3%;
        height: 30px;
        img{
          width: 100%;
        }
      }
    }
    .my-account{
      width: 100%;
      height: 166px;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
      display: flex;
      align-items: center;
      .my-account__right{
        width: 50%;
        height: 166px;
        border-right: 1px solid #ddd;
        padding-top: 45px;
        box-sizing: border-box;
        p:nth-child(1){
          text-align: center;
          font-size: 42px;
          color: #ff603e;
          font-weight: bold;
          span{
            font-size: 25px;
            color: #ff603e;
            font-weight: normal;
          }
        }
        p:nth-child(2){
          text-align: center;
          margin-top: 15px;
          font-size: 25px;
          color: #666;
          font-weight: bold;
        }
      }
      .my-account__item{
        width: 50%;
        height: 166px;
        padding-top: 45px;
        box-sizing: border-box;
        p:nth-child(1){
          text-align: center;
          font-size: 42px;
          color: #6ac20c;
          font-weight: bold;
          span{
            font-size: 25px;
            color: #6ac20c;
            font-weight: normal;
          }
        }
        p:nth-child(2){
          margin-top: 15px;
          text-align: center;
          font-size: 25px;
          color: #666;
          font-weight: bold;
        }
      }
    }
    .my-address{
      width: 100%;
      height: 90px;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      margin-top: 20px;
      background-color: #fff;
      display: flex;
      align-items: center;
      .my-address__icon{
        width: 12%;
        height: 45px;
        text-align: center;
        img{
          width: 40px;
        }
      }
      .my-address__item{
        width: 88%;
        height: 45px;
        font-size: 32px;
        color: #333;
        position: relative;
        img{
          width: 27px;
          position: absolute;
          top: 8px;
          right: 25px;
        }
      }
    }
    .my-mall{
      width: 100%;
      height: 178px;
      margin-top: 20px;
      background-color: #fff;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      .my-mall__item{
        width: 100%;
        height: 90px;
        display: flex;
        align-items: center;
        .my-address__icon{
          width: 12%;
          height: 45px;
          text-align: center;
          img{
            width: 40px;
          }
        }
        .my-address__item{
          width: 88%;
          height: 45px;
          font-size: 32px;
          color: #333;
          position: relative;
          img{
            width: 27px;
            position: absolute;
            top: 8px;
            right: 25px;
          }
        }
        .border{
          height: 90px;
          line-height: 90px;
          border-bottom: 1px solid #ddd;
          img{
            top: 30px;
          }
        }
      }
    }
  }
</style>
